<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>订单列表</title>
    <link href="/js/elementui/index.css" rel="stylesheet"/>
</head>

<body>
<div id="app">
    <h2>订单排单</h2>
    <!--交易订单列表-->
    <div class="block">
        <el-select v-model="order.allstatus" placeholder="选择排单">
            <el-option
                    v-for="orderStatus in orderStatusList"
                    :label="orderStatus.allStatus"
                    :value="orderStatus.id">
            </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="selectByOrderStatus()">查询</el-button>
        <el-button type="primary" icon="el-icon-search" @click="refresh">查询所有</el-button>
    </div>


    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                label="序号">
            <template slot-scope="scope">
                <span style="margin-left: 10px;width: 20px">{{scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单编号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.orderId}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单类型">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.orderType}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="生产计划编号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.productPlanNo}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="型号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.customId}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="责任产线">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.productLineId}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="生产数量">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.number}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="开始生产日期">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.productPlanTime}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="结束生产日期">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.productPlanOvertime}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="备注">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.explains}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="状态">
            <template slot-scope="scope">
                <span style="margin-left: 10px;background-color:#00FF7F;color: white" v-if="scope.row.allstatus=='待生产'">{{scope.row.allstatus}}</span>
                <span style="margin-left: 10px;background-color:#FF0000;color: white" v-if="scope.row.allstatus=='待排单'">{{scope.row.allstatus}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        v-if="scope.row.allstatus=='待排单'"
                        size="mini"
                        type="primary"
                        @click="handleChange(scope.row.id,scope.row.orderStatus,current)">设置排单
                </el-button>
                <el-button
                        v-if="scope.row.allstatus=='待生产'"
                        disabled
                        size="mini"
                        type="primary">设置排单
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页按钮-->
    <el-pagination
            big
            @size-change="handleSizeChange"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-sizes="[1,5, 10, 20]"
            :page-size="pageSize"
            layout="sizes,prev, pager, next">
    </el-pagination>
</div>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data() {
            return {
                orderStatusList: null,//下拉框选中自定义实体对象
                tableData: null,//表数据
                total: 0,//总条数
                current: 0,//当前页数
                pageSize: 10,//每页条数
                current2: 0,//最新页数
                order: {
                    id: "",
                    orderId: "",
                    orderType: "",
                    //生产计划编号
                    productPlanNo: "",
                    //型号
                    customId: '',
                    //责任产线，t_product_line表
                    productLineId: '',
                    //生产数量
                    number: "",
                    //开始生产日期
                    productPlanTime: '',
                    //结束生产日期
                    productPlanOvertime: '',
                    //备注
                    explains: "",
                    //订单状态id
                    orderStatus: "",
                    //订单状态
                    allstatus: "",
                },
                formLabelWidth: '120px',
                orderId: "",
                key: '0',
            }
        },
        methods: {

            //设置页面大小
            handleSizeChange(val) {
                var page = this.current;
                this.pageSize = val;
                this.loadPage(page);
            },
            //设置为待发货
            handleChange(id, orderStatus, current) {
                this.page = current;
                this.order.orderStatus = orderStatus;
                this.order.id = id;
                // alert(id+","+orderStatus+","+current);
                axios.post("/order/changestatue", this.order).then(value => {
                    if (value.data.data) {
                        this.loadPage(this.page);
                    }
                })
            },
            //记载分页
            loadPage(current) {
                this.page = current;
                this.current = current;
                //分页查询 待排单 和 待生产(已排单) 的订单
                this.order.orderStatus = "5,6";
                axios.post("/order/status/" + current + "/" + this.pageSize + "/" + this.key, this.order).then(value => {
                    if (value.data.code == 1) {
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                    }
                });
                //获取状态的下拉列表
                axios.post("/orderStatus", this.order).then(value => {
                    if (value.data.code == 1) {
                        this.orderStatusList = value.data.data;
                    }
                })
            },
            selectByOrderStatus(current) {
                // alert("当前状态："+this.order.allstatus);
                axios.post("/order/status2", this.order).then(value => {
                    if (value.data.code == 1) {
                        // alert(value.data.data);
                        this.tableData = value.data.data;
                        this.total = value.data.data.length;
                        this.key = this.order.allstatus;
                    }
                })
            },
            //全部订单刷新页面
            refresh() {
                this.order.allstatus="";
                var page = this.current;
                this.key = '0';
                this.loadPage(page);
            },
        },
        mounted() {
            //调用loadPage函数，设置分页数据，向后台传递参数
            this.loadPage(1);
        },
    });
</script>
</body>
</html>